<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
  Card,
  Divider,
  Descriptions,
  DescriptionsItem,
  Image,
} from 'ant-design-vue';
import { ref, onMounted, watch } from 'vue';

const deptInfo = ref<SystemUserApi.User>({});


const props = defineProps({
  data: {
    type: Object,
    default: 0,
  },
});

watch(() => props.data, async (data) => {
  if (data) {

deptInfo.value = props.data;
console.log(333,deptInfo.value);
  }
});
</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
           
            <span class="ml-2 text-lg font-medium">部门信息</span>
          </div>
        </template>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-2 text-xl font-medium">基础信息:</span>
        </div>
        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工姓名">{{ deptInfo?.name}}</DescriptionsItem>
          <DescriptionsItem label="头像">{{ deptInfo?.avatar}}</DescriptionsItem>
          <DescriptionsItem label="性别">{{ deptInfo?.sex}}</DescriptionsItem>
          <DescriptionsItem label="工号">{{ deptInfo?.jobNumber}}</DescriptionsItem>
          <DescriptionsItem label="部门名称">{{ deptInfo?.deptNames}}</DescriptionsItem>
          <DescriptionsItem label="岗位职称">{{ deptInfo?.title}}</DescriptionsItem>
          <DescriptionsItem label="手机号码">{{ deptInfo?.mobile}}</DescriptionsItem>
          <DescriptionsItem label="电子邮箱">{{ deptInfo?.email}}</DescriptionsItem>
          <DescriptionsItem label="员工类型">{{ deptInfo?.empType}}</DescriptionsItem>
          <DescriptionsItem label="工作公司"
            >{{ deptInfo?.workComp}}</DescriptionsItem
          >
          <DescriptionsItem label="身份证号码"
            >{{ deptInfo?.idCard}}</DescriptionsItem
          >
          <DescriptionsItem label="上级负责人">{{ deptInfo?.managerUserid}}</DescriptionsItem>
        </Descriptions>


        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">工作状态:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工状态">{{ deptInfo?.empStatus}}</DescriptionsItem>
          <DescriptionsItem label="入职日期">{{ deptInfo?.contractSignDate}}</DescriptionsItem>
          <DescriptionsItem label="试用期">{{ deptInfo?.probationPeriod}}</DescriptionsItem>
          <DescriptionsItem label="转正日期">{{ deptInfo?.regulaDate}}</DescriptionsItem>
          <DescriptionsItem label="司龄开始日期">{{ deptInfo?.companyAgeStartDate}}</DescriptionsItem>
          <DescriptionsItem label="司龄">{{ deptInfo?.companyAge}}</DescriptionsItem>
        </Descriptions>

        <div class="mb-2 flex items-center rounded-lg p-3">
           <div>
              <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
            </div>
          <span class="mr-4 text-xl font-medium">合同:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="合同编号">{{ deptInfo?.contractCode}}</DescriptionsItem>
          <DescriptionsItem label="合同状态">{{ deptInfo?.contractStatus}}</DescriptionsItem>
          <DescriptionsItem label="合同类型"> {{ deptInfo?.contractType}}</DescriptionsItem>
          <DescriptionsItem label="合同开始日期">{{ deptInfo?.contractStartDate}}</DescriptionsItem>
          <DescriptionsItem label="合同结束日期">{{ deptInfo?.contractEndDate}}</DescriptionsItem>
          <DescriptionsItem label="合同状态">{{ deptInfo?.contractStatus}}</DescriptionsItem>
          <DescriptionsItem label="合同公司"
            >{{ deptInfo?.contractCompany}}</DescriptionsItem
          >
          <DescriptionsItem label="合同有效期">{{ deptInfo?.contractValidity}}</DescriptionsItem>
          <DescriptionsItem label="合同签订日期">{{ deptInfo?.contractSignDate}}</DescriptionsItem>
        </Descriptions>
      </Card>
    </div>
  </Page>
</template>
